<template>
  <div class="user">
    <!-- 工具栏 -->
    <PageTools
      add="新增用户"
      :dict="dict"
      @search="handleSearch"
      @add="handleAdd"
    />
    <!-- 主内容 -->
    <el-card class="box-card" shadow="hover">
      <el-table
        :data="userData"
        style="width: 100%"
        stripe
        border
        highlight-current-row
      >
        <!-- id -->
        <el-table-column label="ID" prop="user_id" width="100px" sortable />
        <!-- 用户名 -->
        <el-table-column label="用户名">
          <template #default="{row}">
            <el-popover trigger="hover" placement="top">
              <p>账号: {{ row.username }}</p>
              <p>密码: {{ row.password }}</p>
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{ row.nickname }}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <!-- 性别 -->
        <el-table-column label="性别" prop="user_sex" width="100px" sortable />
        <!-- 手机 -->
        <el-table-column label="手机" prop="user_tel" />
        <!-- 注册时间 -->
        <el-table-column
          label="注册时间"
          width="300px"
          sortable
          prop="create_time"
        >
          <template #default="{row}">
            <i class="el-icon-time" />
            <span style="margin-left: 10px">
              {{ row.create_time | formatDate }}
            </span>
          </template>
        </el-table-column>
        <!-- 邮箱 -->
        <el-table-column label="邮箱" prop="user_email" />
        <!-- 账号状态 -->
        <el-table-column label="账号状态" sortable prop="status">
          <template #default="{row}">
            <el-switch
              :value="row.status === '正常'"
              :disabled="row.status !== '正常'"
              active-color="#13ce66"
              :inactive-color="row.status === '禁用' ? '#C0CCDA' : '#66B1FF'"
            />
          </template>
        </el-table-column>
        <!-- 操作 -->
        <el-table-column label="操作">
          <template #default="{row}">
            <el-button
              size="mini"
              type="warning"
              @click="handleEdit(row.user_id)"
            >编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(row.user_id)"
            >禁用</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <AddUser
      :show-dialog.sync="showDialog"
      :form-data="formData"
      @reload="getUserFn"
    />
  </div>
</template>

<script>
import { getUserAPI, delUserAPI } from '@/api/user'
import AddUser from './components/add-user.vue'

export default {
  name: 'User',
  components: { AddUser },
  data() {
    return {
      userTable: [], // 所有数据
      userData: [], // 回显数据
      dict: {
        id: 'user_id',
        手机: 'user_tel',
        注册时间: 'create_time'
      },
      showDialog: false,
      formData: {
        user_id: '',
        username: '',
        password: '',
        nickname: '',
        user_email: '',
        status: '',
        user_sex: '',
        user_tel: '',
        user_introduce: '',
        create_time: '',
        update_time: '',
        user_wechat: ''
      }
    }
  },
  watch: {
    showDialog(val) {
      if (!val) {
        this.formData = {
          user_id: '',
          username: '',
          password: '',
          nickname: '',
          user_email: '',
          status: '',
          user_sex: '',
          user_tel: '',
          user_introduce: '',
          create_time: '',
          update_time: '',
          user_wechat: ''
        }
      }
    }
  },
  created() {
    this.getUserFn()
  },
  methods: {
    // 获取全部用户
    async getUserFn() {
      const { users } = await getUserAPI()
      this.userTable = users
      this.userData = users
    },
    // 查询
    handleSearch(key) {
      const userTable = [...this.userTable]
      const create_time = key.create_time.trim()
      const user_tel = key.user_tel.trim()
      const user_id = key.user_id.trim()
      // 为空匹配全部
      if (create_time === '' && user_tel === '' && user_id === '') {
        return (this.userData = userTable)
      }
      const arr = []
      if (user_id !== '') {
        arr.push(
          ...userTable.filter(item => item.user_id.toString() === user_id)
        )
      }

      if (user_tel !== '') {
        arr.push(...userTable.filter(item => item.user_tel === user_tel))
      }

      if (create_time !== '') {
        arr.push(...userTable.filter(item => item.create_time === create_time))
      }
      // 去重
      this.userData = arr.filter((item, index) => arr.indexOf(item) === index)
    },
    // 注册
    handleAdd() {
      this.showDialog = true
    },
    // 编辑
    handleEdit(id) {
      this.showDialog = true
      this.formData = {
        ...this.userTable.filter(item => item.user_id === id)[0]
      }
    },
    // 禁用
    async handleDelete(id) {
      try {
        await delUserAPI(id)
        await this.getUserFn()
      } catch (e) {
        console.log(e)
      }
    }
  }
}
</script>

<style lang="scss" scoped></style>
